<template>
	<div class="activitBox">
		<div class="operateBox">
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动主题:</p>
				<el-input placeholder="请输入活动主题" v-model.trim="activityTheme" clearable maxlength=20 minlength=3>
				</el-input>
				<span class="checkTxt" v-show="showTheme">请输入3~20个字符</span>
				<span class="checkTxt" v-show="diffTheme" v-text="diffText"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动内容:</p>
				<el-input type="textarea" autosize placeholder="请输入活动内容" v-model.trim="activityContent" maxlength=100>
				</el-input>
				<span class="checkTxt" v-show="showContent">请输入3~100个字符</span>
				<span class="checkTxt" v-show="diffContent" v-text="diffText"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>所属活动:</p>
				<el-radio v-model="activityAttribution" label="181010" >充电系统</el-radio>
				<el-radio v-model="activityAttribution" label="181020" disabled>停车系统</el-radio>
				<span class="checkTxt" v-show="diffActivityAttribution" v-text="diffText" style="right:41%;top:-13%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>首页显示:</p>
				<el-radio v-model="homeShow" label="1">首页显示</el-radio>
				<el-radio v-model="homeShow" label="0">首页不显示</el-radio>
				<span class="checkTxt" v-show="diffHomeShow" v-text="diffText" style="right:41%;top:-22%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动列表显示:</p>
				<el-radio v-model="activityShow" label="1">显示</el-radio>
				<el-radio v-model="activityShow" label="0">不显示</el-radio>
				<span class="checkTxt" v-show="diffActivityShow" v-text="diffText" style="right:41%;top:-29%"></span>
			</div>
			<div class="operateDiv" v-show="homeShow == 1">
				<p class="operateText"><sup>*</sup>首页图片上传:</p>
				<el-upload
					:disabled="indexImg"
					class="newAct"	
					:limit="1"
					:show-file-list='false'
					:action="picUpload"
					:data="picData"
					ref="homeImg"
					:on-success="homeImgSuccess"
					:before-upload="beforeAvatarUpload">
					<img v-if="homeImageUrl" :src="PIC_URL+homeImageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<p class="textTip">(支持1MB以下JPG,PNG格式的图片)</p>
				<span class="checkTxt" v-show="diffHomeImgMd5" v-text="diffText" style="right:28%;top:45%"></span>
			</div>
			<div class="operateDiv" style="margin-bottom:.05rem" v-show="activityShow == 1">
				<p class="operateText"><sup>*</sup>活动列表图片上传:</p>
				<el-upload
					class="newAct"	
					:limit="1"
					:action="picUpload"
					:show-file-list='false'
					:data="picData"
					ref="activityImage"
					:on-success="activityImgSuccess"
					:before-upload="beforeAvatarUpload">
					<img v-if="activityImageUrl" :src="PIC_URL+activityImageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<p class="textTip">(支持1MB以下JPG,PNG格式的图片)</p>
				<span class="checkTxt" v-show="diffActivityImgMd5" v-text="diffText" style="right:28%;top:45%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>活动详情页面:</p>
				<div class="modalTxt" v-text="modalName"></div>
				<el-upload
					class="newAct"	
					:limit="1"
					:action="picUpload"
					:show-file-list='true'
					:data="picData"
					ref="modelUpload"
					:on-success="avtivityModelSuccess"
					:before-upload="beforeAvtivityModelUpload">
					<el-button size="small" type="primary" @click="htmlType=1">点击上传</el-button>
				</el-upload>
				<p class="textTip">(请上传zip格式)</p>
				<span class="checkTxt" v-show="diffActivityModelMd5" v-text="diffText" style="left:8%;top:75%"></span>
			</div>
			<div class="btns">
				<div class="pageBtn btn save" @click="goBasics(0)">保存</div>
				<div class="pageBtn btn next" @click="goBasics(1)">下一步</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Step from '_components/Step'
	import {SAVE_OR_EDIT_SETTING,FILE_UPLOAD,FIND_SETTING_BY_CODE} from '@/config/url'
	import {publicVM} from '@/config/public'
	import Bus from '@/bus.js'

	export default {
		components:{
			Step
		},
		mixins: [publicVM],
		data() {
			return {
				activityCode:sessionStorage.getItem('activityCode'),//活动code
				activityTheme:null,//活动主题
				activityContent:null,//活动内容
				activityAttribution:'181010',//活动归属：181010 充电，181020 停车
				homeShow:'0',//首页展示：0不展示，1展示
				activityShow:'0',// 活动列表展示：0不展示，1展示
				activityStatus:null,//活动状态：990013 下架，990014 上架，990012 作废
				activityVerifyStatus:'981001',//活动审核状态：981005 审核失败，981001 新建，981002 待复录，981003 复录失败，981004 待审核，981006 审核成功
				homeImg:null,//首页图片
				homeImgMd5:null,//首页图片md5值
				activityImg:null,//活动列表图片
				activityImgMd5:null,//活动列表图片MD5值
				avtivityModel:null,//活动展示页面
				activityModelMd5:null,//活动展示页面md5
				repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
				operator:null,//操作人
				homeImageUrl:null,
				activityImageUrl:null,
				avtivityModelUrl:null,
				picUpload:FILE_UPLOAD,
				showTheme:false,//显示标题提示
				showContent:false,//显示内容提示
				repeatRecordContent:null,//复录内容
				modalName:null,//活动详情页面
				diffText:'与初录不一致',
				diffTheme:false,
				diffContent:false,
				diffActivityAttribution:false,
				diffHomeShow:false,
				diffActivityShow:false,
				diffHomeImgMd5:false,
				diffActivityImgMd5:false,
				diffActivityModelMd5:false,
				clickNext:false,//是否点击下一步
				htmlType:0,//传zip为1
				isIdentical:null,//0 一致，1 不一致
				indexImg:false,//是否可以上传首页图片
			};
		},
		created(){
			sessionStorage.setItem('detail',0)
		},
		mounted(){
			this.getFirstData()
			$($('input[type="file"]')[0]).hide()
			$($('input[type="file"]')[1]).hide()
		},
		methods:{
			getFirstData(){
				this.$fetch(FIND_SETTING_BY_CODE,
					{
						"activityCode":this.activityCode,
						'repeatRecord':'0',
					},
				)
				.then(res=>{
					if(res.status == 1){
						this.repeatRecordContent = res.data
						if(res.data){
							if(this.repeatRecord == 0){
								this.updateData(res.data)
							}else{
								if(res.data.activityAttribution != '181010'){
									this.diffActivityAttribution = true
								}
								if(res.data.homeShow != '0'){
									this.diffHomeShow = true
								}
								if(res.data.activityShow != '0'){
									this.diffActivityShow = true
								}
								this.getSecData()
							}
						}
					}else{
						this.$message({
							message: '获取初录活动设置数据失败',
							type: 'warning'
						});
					}
				})
				.catch((err)=>{
					console.log(err)
					this.$message({
						message: '获取初录活动设置数据异常',
						type: 'warning'
					});
				})
			},
			getSecData(){
				let that = this
				this.$fetch(FIND_SETTING_BY_CODE,
					{
						"activityCode":this.activityCode,
						'repeatRecord':'1',
					},
				)
				.then(res=>{
					if(res.status == 1){
						let data = res.data
						if(data && this.repeatRecord == 1){
							this.updateData(data)
							
							let repeatRecordContent = that.repeatRecordContent
							if(data.activityTheme != repeatRecordContent.activityTheme){
								this.diffTheme = true
							}
							if(data.activityContent != repeatRecordContent.activityContent){
								this.diffContent = true
							}
							if(data.activityAttribution != repeatRecordContent.activityAttribution){
								this.diffActivityAttribution = true
							}
							if(data.homeShow != repeatRecordContent.homeShow){
								this.diffHomeShow = true
							}
							if(data.activityShow != repeatRecordContent.activityShow){
								this.diffActivityShow = true
							}
							if(data.homeImgMd5 != repeatRecordContent.homeImgMd5){
								this.diffHomeImgMd5 = true
							}
							if(data.activityImgMd5 != repeatRecordContent.activityImgMd5){
								this.diffActivityImgMd5 = true
							}
							if(data.activityModelMd5 != repeatRecordContent.activityModelMd5){
								this.diffActivityModelMd5 = true
							}
						}
					}else{
						this.$message({
							message: '获取复录活动设置数据失败',
							type: 'warning'
						});
					}
				})
				.catch((err)=>{
					console.log(err)
					this.$message({
						message: '获取复录活动设置数据异常',
						type: 'warning'
					});
				})
			},
			updateData(data){
				this.activityTheme = data.activityTheme
				this.activityContent = data.activityContent
				this.activityAttribution = data.activityAttribution
				this.homeShow = data.homeShow + ''
				this.activityShow = data.activityShow + ''
				this.homeImageUrl = data.homeImg
				this.homeImg = data.homeImg
				this.homeImgMd5 = data.homeImgMd5
				this.activityImageUrl = data.activityImg
				this.activityImg = data.activityImg
				this.activityImgMd5 = data.activityImgMd5
				let avtivityModel=data.avtivityModel.substring(data.avtivityModel.lastIndexOf("/")+1);
				if (avtivityModel.length > 20) {
					avtivityModel = avtivityModel.substr(0, 20) + "...";
				}
				this.modalName = avtivityModel
			},
			goBasics(type){
				let that = this
				if(this.activityTheme == '' || this.activityTheme == null){
					this.$message({
						message: '请填写活动主题',
						type: 'error'
					});
					return;
				}else if(this.activityTheme.length < 3){
					this.showTheme = true
					return;
				}
				if(this.activityContent == '' || this.activityContent == null){
					this.$message({
						message: '请填写活动内容',
						type: 'error'
					});
					return;
				}else if(this.activityContent.length < 3){
					this.showContent = true
					return;
				}
				if(this.homeShow == 1 && !this.homeImageUrl){
					this.$message({
						message: '请上传首页图片',
						type: 'error'
					});
					return;
				}
				if(this.activityShow == 1 && !this.activityImageUrl){
					this.$message({
						message: '请上传活动列表图片',
						type: 'error'
					});
					return;
				}
				if(this.modalName == null){
					this.$message({
						message: '请上传活动详情页面',
						type: 'error'
					});
					return;
				}
				if(this.repeatRecord == 0){
					this.isIdentical = 0
				}else{
					if(this.diffTheme || this.diffContent || this.diffActivityAttribution || this.diffHomeShow || this.diffActivityShow || this.diffHomeImgMd5 || this.diffActivityImgMd5 || this.diffActivityModelMd5){
						this.isIdentical = 1
					}else{
						this.isIdentical = 0
					}
				}
				if(this.homeShow == 0 || this.homeImg == null){
					this.homeImg = ""
					this.homeImgMd5 = ""
				}
				if(this.activityShow == 0 || this.activityImg == null){
					this.activityImg = ""
					this.activityImgMd5 = ""
				}
				this.$post(SAVE_OR_EDIT_SETTING,
					{
					"activityCode":this.activityCode,
					'activityTheme':this.activityTheme,
					'activityContent':this.activityContent,
					'activityAttribution':this.activityAttribution,
					'homeShow':this.homeShow,
					'activityShow':this.activityShow,
					'activityStatus':this.activityStatus,
					'activityVerifyStatus':this.activityVerifyStatus,
					'homeImg':this.homeImg,
					'homeImgMd5':this.homeImgMd5,
					'activityImg':this.activityImg,
					'activityImgMd5':this.activityImgMd5,
					'avtivityModel':this.avtivityModel,
					'activityModelMd5':this.activityModelMd5,
					'repeatRecord':this.repeatRecord,
					'operator':this.operator,
					'imageUrl': this.imageUrl,
					'isIdentical':this.isIdentical,
					},
					)
					.then(res=>{
						if(res.status == 1){
							this.$message({
								message: '保存成功',
								type: 'success'
							});
							that.activityCode = res.data
							if(this.repeatRecord == 0){
								sessionStorage.setItem('activityCode',res.data)
							}

							if(type == 1){
								this.clickNext = true
								this.$router.push('/settingIndex/newBasics')
							}
							Bus.$emit('changeStep')
						}else{
							this.$message({
								message: '保存失败',
								type: 'warning'
							});
						}
					})
			},
			homeImgSuccess(res, file) {
				// this.homeImageUrl = URL.createObjectURL(file.raw);
				this.homeImageUrl = res.url;
				this.homeImg = res.url
				this.homeImgMd5 = res.fileMD5
				this.$refs.homeImg.clearFiles()
			},
			activityImgSuccess(res, file){
				this.activityImageUrl = res.url;
				// this.activityImageUrl = URL.createObjectURL(file.raw);
				this.activityImg = res.url
				this.activityImgMd5 = res.fileMD5
				this.$refs.activityImage.clearFiles()
			},
			avtivityModelSuccess(res, file){
				this.avtivityModelUrl = URL.createObjectURL(file.raw);
				this.avtivityModel = res.url
				this.modalName = res.url
				this.activityModelMd5 = res.fileMD5
				this.htmlType = 0
				this.$refs.modelUpload.clearFiles()
			},
			beforeAvtivityModelUpload(file) {
				let name = file.name.split('.')
				
				const isZip = name[name.length-1].toLowerCase() === 'zip';
				// const isZip = file.type === 'application/x-zip-compressed';
				if (!isZip) {
					this.$message.error('只能上传zip格式文件');
				}
				const isCh = /^[^\u4e00-\u9fa5]+$/.test(name[name.length-2]);
				if (!isCh) {
					this.$message.error('上传的文件名称不能有中文!');
				}
				return isZip && isCh;
			},
			beforeAvatarUpload(file) {
				let name = file.name.split('.')
				const isJpg = name[name.length-1].toLowerCase() === 'jpg' || name[name.length-1].toLowerCase() === 'png';

				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 1;

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1MB!');
				}
				if (!isJpg) {
					this.$message.error('只能上传jpg或png格式文件');
				}
				const isCh = /^[^\u4e00-\u9fa5]+$/.test(name[name.length-2]);
				if (!isCh) {
					this.$message.error('上传的文件名称不能有中文!');
				}
				return isLt2M && isJpg && isCh;
			}
		},
		// beforeRouteLeave(to,from,next){
		// 	if(!this.clickNext){
		// 		if(this.showTheme || this.showContent || !this.homeImgMd5 || !this.activityImgMd5 || !this.activityModelMd5){
		// 			next(false)
		// 			this.$message({
		// 				message: '请先保存当前页面的设置',
		// 				type: 'warning'
		// 			});
		// 		}else{
		// 			Bus.$emit('selectTab',to)
		// 			next()
		// 		}
		// 	}else{
		// 		next()
		// 	}
		// },
		watch:{
			activityTheme(val){
				let leng = val.length
				if(leng < 3){
					if(this.repeatRecord == 0){
						this.showTheme = true
					}
					this.diffTheme = false
				}else{
					if(this.repeatRecord == 0){
						this.showTheme = false
					}
					if(this.repeatRecordContent && this.repeatRecordContent.activityTheme !== this.activityTheme){
						this.diffTheme = true
					}else{
						this.diffTheme = false
					}
				}
				this.diffTheme = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityTheme
			},
			activityContent(val){
				let leng = val.length
				if(leng < 3){
					if(this.repeatRecord == 0){
						this.showContent = true
					}
					this.diffContent = false
				}else{
					if(this.repeatRecord == 0){
						this.showContent = false
					}
					if(this.repeatRecordContent && this.repeatRecordContent.activityContent !== this.activityContent){
						this.diffContent = true
					}else{
						this.diffContent = false
					}
				}
				this.diffContent = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityContent
			},
			activityAttribution(val){
				this.diffActivityAttribution = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityAttribution?true:false
			},
			homeShow(val){
				// this.indexImg = val == 1?false:true
				if(val == 0){
					// this.homeShow = null
				}
				this.diffHomeShow = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.homeShow
			},
			activityShow(val){
				// this.listImg = val == 1?false:true
				this.diffActivityShow = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityShow
			},
			homeImgMd5(val){
				this.diffHomeImgMd5 = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.homeImgMd5
			},
			activityImgMd5(val){
				this.diffActivityImgMd5 = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityImgMd5
			},
			activityModelMd5(val){
				this.diffActivityModelMd5 = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.activityModelMd5
			},
		},
		computed:{
			picData(){
				return {
					repeatRecord:this.repeatRecord,
					htmlType:this.htmlType
				}
			},
		}
	}
</script>

<style lang="less">
.activitBox{
	.operateBox{
		width: 50%;
		margin: auto;
		margin-top: 0.1rem;
		input[type="file"]{
			display: none;
		}
		.newAct{
			display: flex;
			flex-direction: row;
		}
		.newAct .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		  }
		  .newAct .el-upload:hover {
			border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		  }
		  .avatar {
			width: 100px;
			height: 100px;
			display: block;
		  }		
			.operateDiv {
				width: 100%;
				margin: auto;
				margin-bottom: 0.15rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 0;
				position: relative;
				.checkTxt{
					color: #FF2E2E;
					position: absolute;
					right: -7%;
				}
			}
			.modalTxt{
				// width:40%;
			}
			.operateText {
				text-align: end;
				width: 19%;
				margin-right: 0.08rem;
			}
			
			.el-input,
			.el-textarea {
				width: 70%
			}
			
			.uploadInput {
				width: 30%;
			}
			
			.uploadBtn {
				width: 80px;
				height: 28px;
				background: rgba(246, 247, 247, 1);
				border: 1px solid rgba(225, 225, 225, 1);
				border-radius: 6px;
				margin-left:0.1rem;
			}
			.textTip{
				padding-top:0.05rem;
				color:#999;
			}
			
			.btns {
				position: fixed;
				bottom:0.15rem;
				left:45%;
			}
			
			.pageBtn {
				width: 0.8rem;
				height: 0.2rem;
				background: #3395FF;
				border-radius: 8px;
				color: #fff;
				margin-left: 0.2rem;
			}
			
			// .next {
			// 	background: #A9D0FF;
			// }
	}
}
</style>